/**
 * ----------------------------------------------------------
 * 一个基于Jquery的插件 用于创建元素的提示框
 *
 * 类似于 Bootstrap 提示工具（Tooltip）插件
 *
 * 元素必须有参数data-tip-id 值为唯一
 * ----------------------------------------------------------
 * @author Ysll <754060604@qq.com>
 * @version 0.0.1-beta
 * @param m 显示的消息内容
 */

/*
 css
.tip {
    position: absolute;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    background-color: #292929;
    color: white;
    font-size: 12px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tip:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-color: transparent transparent #292929 transparent;
    flex: 1;
    margin-top: -21px;
}
*/

$.fn.tip = function (m) {
    if (this.attr('data-tip-id') === undefined) {
        return
    }
    var d = $('[data-tip-target="'+this.attr('data-tip-id') +'"]');
    if (d.length >= 1) {
        d.remove();
    }
    var w, h, l, t;
    w = this.width();
    h = this.height();
    l = this.offset().left;
    t = this.offset().top;
    var tip = $(document.createElement('div'));
    tip.text(m);
    tip.addClass('tip');
    tip.hide();
    $('body').append(tip);
    l = l + (w / 2 - tip.width() / 2);
    t = t + h + 9;
    tip.css({left: l + 'px', top: t + 'px'});
    tip.show();
    tip.attr('data-tip-target', this.attr('data-tip-id'));
    setTimeout(function () {
        tip.remove();
    }, 5000);
};